<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/lib/jquery.min.js" ></script>
		<link rel="stylesheet" href="fonts/iconfont.css">
		<link href="css/bootstrap.css" rel="stylesheet">
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet/less" type="text/css" href="css/xStyle.less" />
        <script type="text/javascript" src="js/lib/less.js" ></script>

		
	</head>
	<body >
	<div style="height: 200px; text-align: center;"></div>	
	<div style="height: 200px; text-align: center;">
          <img src="img/upload/test.png" width="100px"  id="i1" onclick="window.test('i1')">
    </div>
    
    	<div style="height: 200px; text-align: center;">
          <img src="img/upload/testi2.jpg" width="100px"  id="i2" onclick="window.test('i2')">
    </div>
        	<div style="height: 200px; text-align: center;">
          <img src="img/upload/xxxxx.jpg" width="100px"  id="i3" onclick="window.test('i3')">
    </div>
    <div style="height: 200px;"></div>	
	</body>
    <script type="module">

	import  xImage from './js/src/xImage.js';
	
	  
	  window.test = function(el){
	  	xImage.pop($('#'+el));
	  }
  
     
	</script>
</html>
